<template>
  <div class="app-container">
    <el-card shadow="hover" style="padding: 20px">
      <h4 class="mt-0">查询竞赛</h4>
      <el-input
        v-model="searchTitle"
        placeholder="作业 | 竞赛名称"
        style="width: 9rem;"
        @keyup.enter.native="pageContest"
        @input="pageContest"
      />
      <el-select
        v-model="selectStatusValue"
        clearable
        style="margin-left: 1rem"
        placeholder="请选择权限"
        @change="pageContest"
      >
        <el-option
          v-for="item in statusList"
          :key="item.num"
          :label="item.label"
          :value="item.num"
        />
      </el-select>
      <el-select
        v-model="selectClassValue"
        clearable
        style="margin-left: 1rem"
        placeholder="请选择状态"
        @change="pageContest"
      >
        <el-option
          v-for="item in classList"
          :key="item.num"
          :style="{color: item.color}"
          :label="item.label"
          :value="item.num"
        />
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        style="margin-left: 1rem"
        @click="pageContest"
      >搜索
      </el-button>
    </el-card>
    <div style="margin-top: 1rem">
      <el-row v-for="item in contestList" :key="item.contestId" style="margin-bottom: 6px">
        <el-card shadow="hover">
          <div style="height: 70px;width: 100%">
            <div style="padding: 5px 8px 5px 8px">
              <el-row>
                <el-col :span="12" style="">
                  <el-icon class="el-icon-folder" style="font-size: 30px;font-weight: bold" />
                  <el-link style="font-size: 18px;color: #0e9dff;margin-left: 1rem" @click="goExplain(item.contestId)">{{ item.title }}</el-link>
                </el-col>
                <el-col :span="12">
                  <div class="cus-icon" :style="{backgroundColor: classList[item.classValue].color}">{{ classList[item.classValue].label }}</div>
                  <div class="cus-icon" :style="{backgroundColor: statusList[item.statusValue].color}">{{ statusList[item.statusValue].label }}</div>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5px">
                <el-col :span="12">
                  <span style="font-size: 13px">开始时间：{{ item.startTime }}；结束时间：{{ item.endTime }}</span>
                </el-col>
                <el-col :span="12">
                  <span style="float: right;margin-right: 20px;font-size: 13px">
                    <el-icon class="el-icon-user-solid" style="margin-right: 3px" />
                    {{ item.nick }}
                  </span>
                </el-col>
              </el-row>
            </div>
          </div>
          <el-progress :percentage="item.percentage" :color="classList" style="margin-top: -11px" />
        </el-card>
      </el-row>
      <el-card shadow="hover">
        <el-pagination
          style="margin-top: 1rem;"
          background
          :current-page="currentPage"
          :page-sizes="[10, 25, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { loginMessage } from '@/utils/login-message'
import { pageContest } from '@/api/contest'
import { getUserId } from '@/utils/auth'

export default {
  data() {
    return {
      searchTitle: '',
      selectClassValue: '',
      selectStatusValue: '',
      contestList: [{ contestId: 0, title: '2021迎新赛-练习集', startTime: '2021-4-11 03:04:05', endTime: '2021-4-11 03:04:05', classValue: 1, nick: '不如守中', percentage: 0, statusValue: 0 }],
      statusList: [
        { num: 0, label: '公共', color: '#8e44ad' },
        { num: 1, label: '私有', color: '#57606f' },
        { num: 2, label: '我的' }],
      classList: [
        { num: 0, label: '进行中', color: '#2ecc71', percentage: 50 },
        { num: 1, label: '未开始', color: '#3498db', percentage: 100 },
        { num: 2, label: '已结束', color: '#e74c3c', percentage: 100 }
      ],
      currentPage: 1,
      pageSize: 10,
      totalNum: 0
    }
  },
  created() {
    this.pageContest()
  },
  methods: {
    pageContest() {
      if (this.selectStatusValue === 2) {
        if (loginMessage()) {
          this.selectStatusValue = ''
          return
        }
      }
      pageContest({
        current: this.currentPage,
        size: this.pageSize,
        name: this.searchTitle,
        selectStatusValue: this.selectStatusValue,
        selectClassValue: this.selectClassValue,
        userId: getUserId() || -1
      }).then(res => {
        this.totalNum = parseInt(res.data.total)
        this.contestList = res.data.records
      })
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.pageContest()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.pageContest()
    },
    goExplain(contestId) {
      if (loginMessage()) {
        return
      }
      this.$router.push({
        path: '/contest/explain',
        query: { contestId: contestId }
      })
    }
  }
}
</script>

<style scoped>
.cus-icon{
  height: 30px;
  border-radius: 5px;
  font-size: 14px;
  width: 60px;
  color: #fff;
  line-height: 30px;
  margin-right: 20px;
  float: right;
  text-align: center;
}
::v-deep .el-card__body{
  padding: 5px 0 5px 10px;
}
</style>
